<template>
  <div class="gallary" @click="hiddenGallary">
    <div class="wrapper">
      <swiper :options="swiperOptions">
        <swiper-slide v-for="(item, index) in imgList" :key="index">
          <img
            :src="item.url"
            class="swiper-img"
          />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  mounted () {
    console.log(this.imgList)
  },
  props: ['imgList'],
  data () {
    return {
      /* swiper插件配置对象 */
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        }
      }
      /* 轮播图图片列表 */
      // imgList: [
      //   {url: 'http://img1.qunarzz.com/sight/p0/201309/25/755ecc32ea97552ec8d65eac.png_r_800x800_879082bb.png'},
      //   {url: 'http://img1.qunarzz.com/sight/p0/201309/25/5c3e6d07ae09edc4c8d65eac.png_r_800x800_fec0837e.png'},
      //   {url: 'http://img1.qunarzz.com/sight/p0/201309/25/b2e5ad1f52651356c8d65eac.png_r_800x800_bc8e4953.png'}
      // ]
    }
  },
  methods: {
    hiddenGallary () {
      this.$emit('hiddenGallary')
    }
  }
}
</script>

<style lang="stylus" scoped>
.gallary >>> .swiper-container {
  overflow: visible
}
.gallary {
  position: absolute
  top: 0
  bottom: 0
  left: 0
  right: 0
  background-color: #000
  z-index: 3
  display: flex
  justify-content:center
  align-items: center
}
.wrapper {
  width:100%
}
.swiper-img {
  width: 100%
}
.swiper-pagination {
  position: absolute
  bottom: -3.5rem
  color:#fff
  z-index: 4
}
</style>
